<template>
    <el-container id="uploadwidget" class="mev-div-border" style="width: 300px;position: fixed;top: 300px;right:10px">
        <el-main>
            <el-row>
                <el-upload class="upload-demo" ref="uploadTargetImage" multiple="false" :action="serverTarget" :on-preview="handlePreview" :on-remove="handleRemove" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">目标图像</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUploadTargetImage">上传</el-button>
                </el-upload>
            </el-row>
            <el-row>
                <el-upload class="upload-demo" ref="uploadBaseData" multiple="true" :action="server" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">基准数据</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUploadBase">上传</el-button>
                </el-upload>
            </el-row>
            <el-row> <el-button size="small" @click="execmpos">执行</el-button></el-row>
            <el-row>
                <el-input size="mini" v-model="target_x" type="number"></el-input>
                <el-input size="mini" v-model="target_y" type="number"></el-input>
                <el-button size="mini" @click="positioning">定位</el-button>
                <el-input size="mini" v-model="target_xyz"></el-input>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
import $ from "jquery";
import MPos from "./MPos";
export default {
    name: "UploadFileWidget",
    data() {
        return {
            serverTarget: Setting.MPOS_SERVER + "pnp/uploadTargetImage",
            server: Setting.MPOS_SERVER + "pnp/uploadBaseData",
            //fileList: [],
            fileList: [],
            nameList: [],
            target_x: 100,
            target_y: 100,
            target_xyz:""
        };
    },
    mounted() {
        //this.$refs.upload.act;
    },
    methods: {
        submitUploadBase() {
            // let nameList = [];
            // this.$refs.upload.uploadFiles.forEach(function (file) {
            //     nameList.push(file.name)
            // })
            // this.nameList = nameList;
            this.$refs.uploadBaseData.submit();
        },
        submitUploadTargetImage() {
            this.$refs.uploadTargetImage.submit();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        execmpos() {
            let that = this;
            let jsonstr = JSON.stringify({
                img1: that.nameList[0],
                depth1: that.nameList[1],
                img2: that.nameList[2],
                width: window.cesiumViewer.scene.view.viewport.width,
                height: window.cesiumViewer.scene.view.viewport.height
            });
            // MPos.setVPMatrix({});
            $.ajax({
                type: "POST",
                url: Setting.MPOS_SERVER + "pnp/getRegistrationInfo",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: jsonstr,
                success: function(res) {
                    if (res.code == 0) {
                        MPos.setVPMatrix(res.data);
                        that.$message("计算成功！");
                    } else {
                        that.$message("计算失败！");
                    }
                },
                error: function() {}
            });
        },
        positioning(){
            let that = this;
            let jsonstr = JSON.stringify([that.target_x,that.target_y]);
            $.ajax({
                type: "POST",
                url: Setting.MPOS_SERVER + "pnp/getRay",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: jsonstr,
                success: function(res) {
                    if (res.code == 0) {
                        let pos = MPos.pickingRay(res.data);
                        let jsontext=JSON.stringify(pos);
                        that.target_xyz = jsontext;
                        that.$message(jsontext);
                    } else {
                        that.$message("计算失败！");
                    }
                },
                error: function() {}
            });
        }
    }
};
</script>

<style scoped></style>
